<template lang="html">
  <div class="view-book-chapter-empty" v-if="showEmpty" v-loading="chapterLaoding">
    <el-empty :description="emptyMsg" />
  </div>
  <div class="book-scroll" id="view-book-chapter" v-else>
    <div class="book-chapter-info">
      <div class="book-chapter-image">
        <img :src="currentBook.bookPic" class="book-img" />
      </div>
      <div class="book-chapter-book">
        <p class="title">{{ currentBook.bookName }}</p>
        <p class="author">作者:{{ currentBook.bookAuthor }}</p>
        <p class="category"><span>{{ currentBook.category }}</span><span class="dot">·</span><span>{{
          currentBook.subCategory }}</span></p>
        <p class="btn">
          <el-button v-if="currentReadChapter == null" @click="readContent">开始阅读</el-button>
          <el-button v-else @click="readContent">继续阅读</el-button>
          <el-button v-if="!hasBookshelf()">加入书架</el-button>
          <el-button v-else>已在书架</el-button>
        </p>
      </div>
      <div class="book-chapter-desc">
        <p class="title"><el-divider content-position="left" border-style="dashed">简介</el-divider></p>
        <p class="desc">{{ currentBook.bookDesc }}</p>
      </div>
    </div>
    <div class="book-chapter-volume" v-for="(group, key) in groupChapters">
      <div class="book-chapter-title" :key="key">
        {{ key }}
      </div>
      <div class="book-chapter-list">
        <div class="book-chapter-item" v-for="item in group" :key="item.id" :title="item.name"
          @click="openChapter(item)">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus'
import _ from 'lodash';
import { useBookChapterStore } from '@/stores/bookChapter';
import { useBookshelfStore } from '@/stores/bookshelf';
import { useRouter } from 'vue-router'
const bookChapterStore = useBookChapterStore();
const bookshelfStore = useBookshelfStore();
const router = useRouter();

const currentBook = ref({}); // 当前书籍
const groupChapters = ref({}); // 分组章节
const emptyMsg = ref('请选择书籍'); // 空数据提示
const showEmpty = ref(true); // 是否展示空数据
const chapterLaoding = ref(false); // 章节加载中
const currentReadChapter = ref(null); // 是否有阅读章节
const currentChapters = ref([]); // 当前书籍章节集合

function choseBook(book) {
  currentBook.value = book;
  chapterLaoding.value = true; // 设置加载中
  bookChapterStore.getBookChapters(book.bookId)
    .then((chapters) => {
      if (chapters.length == 0) {
        emptyMsg.value = '书籍章节不存在';
        return Promise.reject('书籍章节不存在');
      }
      currentChapters.value = chapters;
      groupChapters.value = _.groupBy(chapters, (item) => {
        return item.volumeName;
      });
      showEmpty.value = false; // 隐藏空数据提示
      return hasLastReadChapter(book.bookId);
    }).catch((err) => {
      console.error('book-content', err);
      ElMessage({
        message: err,
        type: 'error',
      });
    }).finally(() => {
      chapterLaoding.value = false; // 设置加载完成
    });;
}

// 阅读内容
function readContent() {
  const readChapter = currentReadChapter.value || currentChapters.value[0];

  console.log('readContent', readChapter)
  openChapter(readChapter);
}

function openChapter(readChapter) {
  const contentRoute = router.resolve({
    path: `/content/${currentBook.value.bookId}/${readChapter.id}`,
  })
  window.open(contentRoute.href, '_blank');
}

// 是否最后阅读章节
async function hasLastReadChapter(bookId) {
  const readChapter = await bookChapterStore.getBookLastReadingChapter(bookId);
  currentReadChapter.value = readChapter;
}

// 是否在书架
async function hasBookshelf() {
  const book = await bookshelfStore.getBook(currentBook.value.bookId);
  return book != null;
}

defineExpose({
  choseBook,
});

</script>
<style lang="less">
#view-book-chapter {
  .book-chapter-info {
    .book-chapter-book {
      .btn {
        display: flex;
        gap: 10px;
        margin-top: 10px;

        button {
          width: 100px;
          height: 30px;
          line-height: 30px;
          font-size: 14px;
        }
      }
    }

    .book-chapter-desc {
      .title {
        font-size: 22px;

        .el-divider__text {
          font-size: 22px;
        }
      }
    }
  }
}
</style>
<style lang="less" scoped>
.view-book-chapter-empty {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#view-book-chapter {
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;

  .book-chapter-info {
    background-color: #eef7f8;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    align-items: center;

    .book-chapter-image {
      border-radius: 5px;
      overflow: hidden;
    }

    .book-chapter-book {
      p {
        margin-bottom: 15px;
        color: #000
      }

      .title {
        font-size: 30px;
        font-weight: bold;
        height: 30px;
        line-height: 30px;
      }

      .category {
        display: flex;
        height: 30px;
        line-height: 30px;
      }

      .dot {
        font-size: 30px;
        margin: 0 5px;
      }

    }

    .book-chapter-desc {
      background-color: #fff;
      flex: 1;
      border-radius: 5px;
      padding: 10px;
      min-height: 200px;
    }
  }

  .book-chapter-volume {
    margin-bottom: 10px;

    .book-chapter-title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .book-chapter-list {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;

      .book-chapter-item {
        width: 350px;
        padding: 5px;
        border-radius: 4px;
        cursor: pointer;
        border-bottom: 1px solid #eaeaea;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &:hover {
          background-color: #f0f0f0;
        }

        &.is-active {
          color: #e5353e;
        }
      }
    }
  }
}
</style>
